<template>
  <div class="flex items-center justify-center">
    <div class="flex-1 h-[1px] bg-gradient-to-r from-transparent via-emerald-200 to-transparent"></div>
    <div class="flex items-center bg-emerald-50/60 rounded-lg py-0.5 px-2 mx-3">
      <i :class="`iconfont icon-${icon} text-emerald-500 text-base`"/>
      <span class="title font-semibold text-emerald-600 ml-1.5">{{ title }}</span>
    </div>
    <div class="flex-1 h-[1px] bg-gradient-to-r from-transparent via-emerald-200 to-transparent"></div>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    required: true
  },
  icon: {
    type: String,
    required: true
  }
})
</script> 